<template>
  <section>
    <el-row class="container">
      <el-row :class="box" v-for="(item,index) in tab.items" :key="index">
        <el-row v-if="index === 0" :class="itemIndex">
          <el-row class="img" @click.native="checkCurrItem(item)">
            <i class="el-icon-picture" v-if="item.adImg === ''"
               style="border: 2px solid #bbb;font-size: 100px;text-align: center;color: #bbb;width: 300px"/>
            <img v-else :src="item.adImg" width="300px" style="border: 2px solid #bbb;"/>
          </el-row>
        </el-row>
        <el-row v-else :class="detail">
          <el-row class="img" @click.native="checkCurrItem(item)">
            <i class="el-icon-picture" v-if="item.adImg === ''"
               style="border: 2px solid #bbb;font-size: 100px;text-align: center;color: #bbb;width: 300px"/>
            <img v-else :src="item.adImg" width="300px" style="border: 2px solid #bbb;"/>
          </el-row>
        </el-row>
      </el-row>
    </el-row>

    <el-row v-if="currItem">
      <upload-img v-on:get="getImgUrl($event,currItem)"></upload-img>
      <el-input size="mini" v-model="currItem.adImg" style="width: 50%"></el-input>
      <el-row style="margin-top: 20px"  v-if="currItem.adImg !== ''">
        <img :src="currItem.adImg" width="60%" style="border:1px solid red" />
      </el-row>
      <el-button size="mini" type="text" style="color:blue" @click="addUrlBtn" v-if="currItem.adImg !== ''">生成地址</el-button>
    </el-row>
    <el-dialog :visible.sync="show" v-if="show" title="设置">
      地址：<el-input size="mini" v-model="currItem.url" style="width: 90%"></el-input>
      <set-detail :item="currItem" v-on:save="saveItem"></set-detail>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler'
  import uploadImg from  '@/common/uploadImg'
  import setDetail from './setDetail'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "tabImgs",
    components:{setDetail,uploadImg},
    props:['showType','tab','ad'],
    data() {
      return {
        imgs:0,
        box:'',
        itemIndex:null,
        detail:null,
        currItem:null,
        show:false
      }
    },
    watch:{
      showType(nv,ov){
        if(nv){
          console.log(nv)
          this.init(nv)
        }
      },
    },
    created(){
      console.log(this.showType)
      console.log(this.tab)
      this.init(this.showType)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(code){
        if(code === 'four'){
          this.box = 'box'
          this.itemIndex='item'
          this.detail='item'
        }else if (code === 'five'){
          this.box = 'box5'
          this.itemIndex='item-index'
          this.detail='item5'
        } else if (code === 'nine'){
          this.box = 'box9'
          this.itemIndex='item'
          this.detail='item'
        }else if (code === 'six'){
          this.box = 'box9'
          this.itemIndex='item'
          this.detail='item'
        }
      },
      checkCurrItem(item){
        console.log('确定',item)
        this.currItem=item
      },
      getImgUrl(data, row) {
        if(row.adImg === undefined){
          Vue.set(row,'adImg',data[0].url)
          return
        }
        row.adImg = data[0].url
      },
      addUrlBtn(row){
        this.show=true
      },
      saveItem(e){
        let data={id:this.ad.id,config:JSON.stringify(this.ad.config)}
        this.updateAd(data)
      },
      updateAd(data){
        this.fetch({name:"updateAd",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'保存成功！'})
            this.show=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>
  .container{
    width: 900px;
    border: 0px solid crimson;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .box{
    border: 1px solid blue;
    width: 450px;
    height: 450px;
    margin: auto;
  }
  .box5{
    border: 1px solid blue;
  }
  .box9{
    border: 1px solid blue;
    width: 300px;
    height: 300px;
    margin: auto;
  }
  .item{
    border: 1px solid green;
    /*width: 90%;*/
    height: 100%;
    margin: auto;
  }
  .item-index{
    border: 1px solid red;
    width:600px;
    height:300px;
  }
  .item5{
    border: 1px solid red;
    width: 300px;
    height:300px ;
  }
  .img{
    /*background-color: #eee;*/
    border: 1px solid red;
  }
</style>
